<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>平台数据</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>数据统计汇总</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div v-loading="loading.loading">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>快讯</span>
              <el-tag size="small" type="success" style="float: right;cursor: pointer;"
                @click="goUrlsRouter('/article/index')">添加+</el-tag>
            </div>
            <div class="card-panel-num"><count-to :startVal="0" :endVal="newsTotal" :duration="3000"></count-to></div>
            <div class="card-panel-date">
              <span class="date_text">昨日数据</span>
              <span class="date_num">0</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>活动</span>
              <el-tag size="small" type="success" style="float: right;cursor: pointer;"
                @click="goUrlsRouter('/article/index')">添加+</el-tag>
            </div>
            <div class="card-panel-num"><count-to :startVal="0" :endVal="activityTotal" :duration="3000"></count-to>
            </div>
            <div class="card-panel-date">
              <span class="date_text">昨日数据</span>
              <span class="date_num">{{ activityTotalYes }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>城市</span>
              <el-tag size="small" type="success" style="float: right;cursor: pointer;"
                @click="goUrlsRouter('/area/index')">全部</el-tag>
            </div>
            <div class="card-panel-num"><count-to :startVal="0" :endVal="commTotal" :duration="3000"></count-to></div>
            <div class="card-panel-date">
              <span class="date_text">昨日数据</span>
              <span class="date_num">{{ commTotalYes }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>楼盘</span>
              <el-tag size="small" type="success" style="float: right;cursor: pointer;"
                @click="goUrlsRouter('/house/index')">全部</el-tag>
            </div>
            <div class="card-panel-num"><count-to :startVal="0" :endVal="usersTotal" :duration="3000"></count-to></div>
            <div class="card-panel-date">
              <span class="date_text">昨日数据</span>
              <span class="date_num">{{ usersTotalYes }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/article/index')">
            <span class="ft26" style="color: rgb(87, 209, 160);">
              <i class="el-icon-question"></i>
            </span>
            <span class="panel-text">资讯管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/area/index')">
            <span class="ft26" style="color: rgb(105, 192, 253);">
              <i class="el-icon-medal"></i>
            </span>
            <span class="panel-text">城市管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/house/index')">
            <span class="ft26" style="color: rgb(239, 155, 111);">
              <i class="el-icon-goods"></i>
            </span>
            <span class="panel-text">楼盘管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/advert/index')">
            <span class="ft26" style="color: rgb(178, 127, 235);">
              <i class="el-icon-takeaway-box"></i>
            </span>
            <span class="panel-text">广告管理</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/config/site')">
            <span class="ft26" style="color: rgb(239, 179, 44);">
              <i class="el-icon-aim"></i>
            </span>
            <span class="panel-text">站点配置</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="card-panel-count" @click="goUrlsRouter('/admin/index')">
            <span class="ft26" style="color: rgb(239, 155, 111);">
              <i class="el-icon-unlock"></i>
            </span>
            <span class="panel-text">权限管理</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style>
.el-row {
  margin-bottom: 10px;
}

.el-row :last-child {
  margin-bottom: 0;
}

.card-panel-num {
  font-size: 30px;
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
}

.card-panel-date {
  border-top: 1px solid #eee;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 13px 0px 3px 0px;
  font-size: 14px;
  color: #8c8c8c;
}

.card-panel-count {
  background-color: #fff;
  border-radius: 4px;
  height: 104px;
  text-align: center;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.panel-text {
  font-size: 14px;
  color: #303133;
  margin-top: 15px;
}



.gl-count {
  flex: 1;
  text-align: center;
}

.gl-count p:nth-child(1) {
  font-size: 14px;
  line-height: 23px;
  margin-bottom: 16px;
  color: #666;
}

.gl-count p:nth-child(2) {
  font-size: 38px;
  line-height: 35px;
  color: #1676eb;
  font-weight: bold;
}

.gl-count p:nth-child(2):after {
  box-sizing: border-box;
}
</style>
<script>
import countTo from "vue-count-to";

export default {
  components: { countTo },
  data() {
    return {
      newsTotal: 0,
      activityTotal: 0,
      commTotal: 0,
      usersTotal: 0,
      newsTotalYes: 0,
      activityTotalYes: 0,
      commTotalYes: 0,
      usersTotalYes: 0,
      userData: {
        columns: ["日期", "数量"],
        rows: [],
      },
      newsData: {
        columns: ["日期", "数量"],
        rows: [],
      },
      activityData: {
        columns: ["日期", "数量"],
        rows: [],
      },
      userDate: "",
      newsDate: "",
      activityDate: "",
      loading: {
        loading: true,
        billLoading: false,
        manageLoading: false,
        appLoading: false,
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  created() {
    this.getIndex();
    //this.getUsersData();
    //this.getActivityData();
    //this.getNewsData();
  },
  methods: {

    goUrlsRouter(urls) {
      this.$router.push(urls);
    },

    getDateUser() {
      this.getUsersData();
    },

    getDateNews() {
      this.getNewsData();
    },

    getDateActivity() {
      this.getActivityData();
    },

    getIndex() {
      const that = this;
      that.axios.post("/index/getIndexData").then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.newsTotal = res.data.news;
          this.activityTotal = res.data.activity;
          this.usersTotal = res.data.users;
          this.commTotal = res.data.comment;
          this.newsTotalYes = res.data.news_yes;
          this.activityTotalYes = res.data.activity_yes;
          this.usersTotalYes = res.data.users_yes;
          this.commTotalYes = res.data.comment_yes;
          this.loading.loading = false;
        } else {
          this.loading.loading = false;
          that.$message.error(res.msg);
        }
      });
    },

    getUsersData() {
      const that = this;
      this.loading.billLoading = true;
      that.axios.post("/index/getUsersData", {
        times: that.userDate
      }).then((res) => {
        if (res.code == 200) {
          this.userData.rows = res.data;
        } else {
          that.$message.error(res.msg);
        }
        this.loading.billLoading = false;
      });
    },

    getNewsData() {
      const that = this;
      this.loading.billLoading = true;
      that.axios.post("/index/getNewsData", {
        times: that.newsDate
      }).then((res) => {
        if (res.code == 200) {
          this.newsData.rows = res.data;
        } else {
          that.$message.error(res.msg);
        }
        this.loading.billLoading = false;
      });
    },

    getActivityData() {
      const that = this;
      this.loading.billLoading = true;
      that.axios.post("/index/getActivityData", {
        times: that.activityDate
      }).then((res) => {
        if (res.code == 200) {
          this.activityData.rows = res.data;
        } else {
          that.$message.error(res.msg);
        }
        this.loading.billLoading = false;
      });
    },

  },
};
</script>
